<!DOCTYPE html>
<html>
  <head>
    <title>选择题</title>
    <style>
      body {
        padding: 0 100px;
      }
      div {
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
    <h1>选择题</h1>
    <main id="main">
      <!-- <div>
        <p>在下列哪个选项中，typeof 返回的值为 "object"？</p>
        <input type="radio" name="001" /> A. null
        <input type="radio" name="001" /> B. undefined
        <input type="radio" name="001" /> C. function
        <input type="radio" name="001" /> D. string
      </div> -->
    </main>
    <button onclick="submitAnswers()">提交答案</button>
    <p id="score"></p>

    <script src="./js/form-serialize.js"></script>
    <script>
      const list = [
        {
          id: '001',
          titile: '在下列哪个选项中，typeof 返回的值为 "object"？',
          options: [
            { op: 'A', value: 'null' },
            { op: 'B', value: 'undefined' },
            { op: 'C', value: 'function' },
            { op: 'D', value: 'string' },
          ],
        },
        {
          id: '002',
          titile: '下列哪个方法可以用于删除一个对象的属性？',
          options: [
            { op: 'A', value: 'object.remove(property)' },
            { op: 'B', value: 'object.delete(property)' },
            { op: 'C', value: 'delete object.property' },
            { op: 'D', value: 'object.pop(property)' },
          ],
        },
        {
          id: '003',
          titile: '下列哪个方法可以用于在数组的末尾添加一个新元素？',
          options: [
            { op: 'A', value: 'array.add(newElement)' },
            { op: 'B', value: 'array.insert(newElement)' },
            { op: 'C', value: 'array.push(newElement)' },
            { op: 'D', value: 'array.unshift(newElement)' },
          ],
        },
      ]
      const answer = {
        '001': 'A',
        '002': 'C',
        '003': 'C',
      }

      function render() {
        const main = document.querySelector('#main')
        const htmlStr = list
          .map((item) => {
            // console.log(item)
            // console.log(item.id)
            return `
        <div>
        <p>${item.titile}</p>
        ${item.options
          .map((item2) => {
            // console.log(item2)
            return ` <input type="radio"  name=${item.id} value=${item2.op}>${item2.op}. ${item2.value} &nbsp
          `
          })
          .join('')}
       </div>
        `
          })
          .join('')
        main.innerHTML = `<form action="" class="form">${htmlStr}</form>`
      }
      render()
      
      function submitAnswers() {
        // console.log(1)
        const data = serialize(document.querySelector('form'), { hash: true })
        console.log(data)
        let f = 0
        for (let k in answer) {
          if (answer[k] == data[k]) {
            f += 10
          }
        }
        document.querySelector('#score').innerHTML = `总共答对了${f / 10}题，分数为${f}分`
      }
    </script>
  </body>
</html>
